<template>
  <div>
    <Breadcrumb :items="['系统管理', '组织机构管理']" />
    <a-card class="general-card" title="组织机构管理">
      <template #extra>
        <a-space direction="horizontal" :size="18">
          <a-button v-authorities="[SYS_PM.SYS_DEPT_READ]" type="primary" :loading="loading" @click="refresh">
            <template #icon>
              <icon-refresh />
            </template>
            刷新
          </a-button>
        </a-space>
      </template>
      <!--分割线-->
      <a-divider direction="horizontal" />
      <a-row style="margin-bottom: 16px">
        <a-col :span="16">
          <a-space>
            <a-button v-authorities="[SYS_PM.SYS_DEPT_WRITE]" type="primary" @click="onCreate">
              <template #icon>
                <icon-plus />
              </template>
              添加
            </a-button>
          </a-space>
        </a-col>
      </a-row>

      <a-table
        :columns="tableColumns"
        :data="tbData"
        :loading="loading"
        row-key="id"
        :pagination="false"/>
    </a-card>

    <dept-modal ref="deptModal"  @refresh="refresh"/>
  </div>
</template>

<script setup lang="tsx">
import { onMounted, ref } from "vue";
// eslint-disable-next-line @typescript-eslint/no-unused-vars
import DeptModal from "@/views/system/dept/components/dept-modal.vue";
import dayjs from "dayjs";
import useLoading from "@/hooks/loading";
import { deleteById, listTree } from "@/api/modules/system/dept";
import { DeptVo } from "@/types/modules/system";
import { SYS_PM } from "@/types/PM";

const tableColumns = [{
  title: '组织机构名',
  dataIndex: 'name',
  fixed: 'left'
}, {
  title: '组织机构编码',
  dataIndex: 'code'
}, {
  title: '排序',
  dataIndex: 'order'
}, {
  title: '创建时间',
  render: ({ record }: { record: any }) => {
    return dayjs(record.createTime).format('YYYY-MM-DD HH:mm:ss')
  }
}, {
  title: '更新时间',
  render: ({ record }: { record: any }) => {
    return dayjs(record.updateTime).format('YYYY-MM-DD HH:mm:ss')
  }
}, {
  title: "操作",
  width: 220,
  align: "right",
  fixed: "right",
  render: ({ record }: { record: any }) => {
    return <>
      <a-button v-authorities={Array.of(SYS_PM.SYS_DEPT_READ)} type="text" size="small" onClick={() => onPreview(record.id)}>
        预览
      </a-button>
      <a-button v-authorities={Array.of(SYS_PM.SYS_DEPT_WRITE)} type="text" size="small" onClick={() => onUpdate(record.id)}>
        编辑
      </a-button>
      <a-popconfirm content={`确定删除 '${record.name}' 吗?`} type="warning" onOk={() => onDelete(record.id)}>
        <a-button v-authorities={Array.of(SYS_PM.SYS_DEPT_WRITE)} type="text" size="small" status="danger">
          删除
        </a-button>
      </a-popconfirm>
    </>
  }
}]

const tbData = ref<DeptVo[]>([]);
const deptModal = ref<any>()
const { loading, setLoading } = useLoading();

const refresh = async () => {
  setLoading(true)
  tbData.value = (await listTree()).data
  setLoading(false)
}

const onCreate = async () => {
  setLoading(true)
  await deptModal.value.createHandle()
  setLoading(false)
}

const onUpdate = async (id: number) => {
  setLoading(true);
  await deptModal.value.updateHandle(id);
  setLoading(false);
};

const onPreview = async (id: number) => {
  setLoading(true)
  await deptModal.value.previewHandle(id)
  setLoading(false)
}

const onDelete = async (id: number) => {
  setLoading(true)
  try {
    await deleteById(id)
  } finally {
    await refresh()
  }
  setLoading(false)
}

onMounted(() => {
  refresh()
})
</script>

<script lang="tsx">
export default {
  name: "Dept"
};
</script>

<style scoped>

</style>
